<template>
  <div id="app">
    <div>
      <section>
        <label for="">用户名：</label>
        <input type="text" v-model="item.userName">
      </section>
      <section>
        <label for="">密码：</label>
        <input type="password" v-model="item.userPwd">
      </section>
      <section>
        <label for="">邮箱：</label>
        <input type="email" v-model="item.emial">
      </section>
      <section>
        <label for="">性别：</label>
        <select v-model="item.gender">
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </section>
      <section>
        <label for="">兴趣爱好：</label>
        <label for="basketball"><input id="basketball" type="checkbox" value="篮球" v-model="item.hobby">篮球</label>
        <label for="football"><input id="football" type="checkbox" value="足球" v-model="item.hobby">足球</label>
        <label for="badminton"><input id="badminton" type="checkbox" value="羽毛球" v-model="item.hobby">羽毛球</label>
      </section>
      <section>
        <button @click="submit">提交</button>
      </section>
    </div>
  </div>
</template>

<script>

export default {
  data:function(){
    return {
      item:{
        userName:'',
        userPwd:'',
        emial:'',
        gender:1,
        hobby:[]
      }
    }
  },
  methods:{
    submit(){
      console.log(this.item)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
